<!DOCTYPE html>
<html>
<head>
    <title>根据地址显示图片</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript"
            src="http://api.map.baidu.com/api?v=2.3&ak=R0lg8GyKHQI6hUGCuS3OGGVNN3tWVAtN"></script>
    <style>
        #container {
            margin-top: 20px;
            width: 100%;
            height: 100%;
            border: 1px solid gray;
            overflow: hidden
        }

        html, body, .container {
            width: 100%;
            height: 100%;
        }
            .box img{ width: 100%;}

    </style>
</head>
<body style="background:#CBE1FF">
<div class="container">
    <div id="container"></div>
</div>

</body>
<script type="text/javascript">
    var map = new BMap.Map("container");
    var lon = parseFloat({{ lon }});
    var lat = parseFloat({{ lat }});
    var path = "{{ path }}"
    var addr = "{{ addr }}"
     var point = new BMap.Point(lon,lat);
    map.centerAndZoom(point, 15);
    map.enableScrollWheelZoom(); //启用滚轮放大缩小，默认禁用
    map.enableContinuousZoom(); //启用地图惯性拖拽，默认禁用
    map.addControl(new BMap.NavigationControl()); //添加默认缩放平移控件
    map.addControl(new BMap.OverviewMapControl()); //添加默认缩略地图控件
    map.addControl(new BMap.OverviewMapControl({
        isOpen: true,
        anchor: BMAP_ANCHOR_BOTTOM_RIGHT
    })); //右下角，打开
    var localSearch = new BMap.LocalSearch(map);
    localSearch.enableAutoViewport(); //允许自动调节窗体大小

    //map.centerAndZoom([120.155153, 30.347163], 13);
    var marker = new BMap.Marker(new BMap.Point(lon,lat)); // 创建标注，为要查询的地方对应的经纬度
    map.addOverlay(marker);
    var html = "<div class='box'><img onload='imgLoad()' src='" + path +"' /></div>";
    console.log(html)
    var opt = {
        width: 400,
        height: 300,
        title: "照片地址："+addr,
    }
    var infoWindow = new BMap.InfoWindow(html, opt);

        marker.openInfoWindow(infoWindow);

    marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
</script>
</html>